<template>

    <div class="register">

        <a-card
                class="card"
                :style="{boxShadow: '#eee 20px 15px 105px',marginBottom: '20px',backgroundColor: '#f7f7f7',marginTop: '50px'}"
                hoverable
        >
        <a-form ref="formRef" :size="form.size" :model="form" :style="{width:'500px',marginTop: '20px'}" @submit="handleSubmit">

            <a-form-item field="userName" hide-asterisk="true" label="账号"
                         :rules="[{required:true,message:'必须填写账号'},
                         {minLength:4,message:'账号长度最少4个字符'},
                         {maxLength:12,message:'账号长度不能超过12个字符'}]"
                         :validate-trigger="['change','input']"
                         validate-trigger="blur"
            >
                <a-input v-model="form.userName" placeholder="请输入你的账号"/>
            </a-form-item>

            <a-form-item field="userPassword" hide-asterisk="true" label="密码"
                         :rules="[{required:true,message:'必须填写密码'},
                         {minLength:6,message:'密码长度最少6个字符'},
                         {maxLength:12,message:'密码长度最长12个字符'}]"
                         :validate-trigger="['change','input']"
                         validate-trigger="blur">
                <a-input-password v-model="form.userPassword" placeholder="请输入密码"/>
            </a-form-item>

            <a-form-item field="email" hide-asterisk="true" label="邮箱"
                         :rules="[{required:true,message:'必须填写邮箱'}]"
                         :validate-trigger="['change','input']"
                         validate-trigger="blur"
                         type="email"
            >
                <a-input v-model="form.email" placeholder="请输入你的邮箱"
                />
            </a-form-item>

            <a-form-item field="school" hide-asterisk="true" label="学校"
                         :rules="[ {maxLength:20,message:'学校名称长度最长20个字符'}]"
                         :validate-trigger="['change','input']"
                         validate-trigger="blur">
                <a-input v-model="form.school" placeholder="请输入你的学校"
                />
            </a-form-item>

            <a-form-item field="verifyCode" label="验证码" hide-asterisk="true"
                         :validate-trigger="['change','input']"
                         validate-trigger="blur">

                <a-input v-model="form.verifyCode" placeholder="请输入邮箱验证码"/>
                <a-button @click="verify" type="primary" :style="{marginLeft:'10px'}" :disabled="disabled">{{getCode}}
                </a-button>
            </a-form-item>


            <a-form-item field="age" label="年龄" hide-asterisk="true"
                         :rules="[{required:false}]"
            >
                <a-input-number v-model="form.age" :min="1" :max="150" :default-value="form.age" :style="{width:'70px'}"
                                placeholder="请输入年龄"></a-input-number>

            </a-form-item>


            <a-form-item  label="性别">
                <a-radio-group v-model="form.gender">
                    <a-radio value="0">男</a-radio>
                    <a-radio value="1">女</a-radio>
                </a-radio-group>
            </a-form-item>


            <a-form-item style="margin-left: 50%">
                <router-link to="/login">返回登录</router-link>
            </a-form-item>
            <a-form-item>

                <a-button style="margin-left: 30%" html-type="submit" type="primary">注册</a-button>

            </a-form-item>
        </a-form>
        </a-card>
    </div>

</template>

<script setup>
    import {reactive} from 'vue';
    // import { Message } from '@arco-design/web-vue';
    import message from "@arco-design/web-vue/es/message";
    import {ref} from "@vue/reactivity";
    import myAxios from '../plugins/myAxios';
    import {useRoute} from "vue-router";
    import {useRouter} from "vue-router";
    import {onMounted, watchEffect} from "@vue/runtime-core";


    const router=useRouter();
    const route=useRoute();

    onMounted(async () => {

    })



    const form = reactive({

        userName: '',
        userPassword:'',
        age: 18,
        gender:'0',
        verifyCode: '',
        school: '',
        email: ''
    });
    const handleSubmit = async () => {


        const res = await myAxios.post('/user/register', {

            username: form.userName,
            userPassword:form.userPassword,
            age: form.age,
            gender:form.gender === '0' ? 0 : 1,
            verifyCode: form.verifyCode,
            school: form.school,
            email: form.email

        })


        if (res.code === 0) {
            message.success("注册成功啦！")
            const redirectUrl = route.query?.redirect ? route.query.redirect : '/login';

            setTimeout(() => {
                window.location.href = redirectUrl
            }, 1000);


        } else {

            message.error(res.description?`${res.description}`:'注册失败！')
        }


    }


    const disabled = ref(false)
    const getCode = ref('获取验证码')

    // 获取验证码
    const verify = async () => {

        console.log("email: " + form.email)
        const res = await myAxios.post('/user/getcode', {
            email: form.email,

        })

        if (res.code === 0) {
            message.success({
                content: '发送验证码成功!',
            })
            let time = 60;
            let count = setInterval(() => {
                if (time === 0) {
                    clearInterval(count);
                    disabled.value = false;
                    getCode.value = '获取验证码'
                    return;
                }
                getCode.value = `${time}s后重新获取`;
                time--;
                disabled.value = true;
            }, 1000)
        } else {
            message.error('' + res.description ? `${res.description}` : '获取邮箱验证码失败！')
        }

    }


</script>

<style scoped>
    .register {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 77vh;
    }


</style>